<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		ul.menu{
			
			background-color:#cccccc;
			width:700px;
			height:60px;
			position:absolute;
			left:50px;
			top:50px;
			overflow:hidden;
			padding-left:20px;
		}
		ul.menu li{
			margin-top:15px;
			background-color:#ffffff;
			overflow:hidden;
			height:30px;	
			float:left;		
		}
		
		ul.menu li div{		
			position:relative;
		}
	</style>
	
	<script  type="text/javascript"  src="../libs/jquery-1.7.1.min.js"> </script>
	<script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>
	<script>
		// 애니메이션 시간을 상수로 설정합니다.
		var OVER_ANIMATION_TIME = 200;
		var OUT_ANIMATION_TIME = 200;
		
		// 메뉴를 담을 변수.
		var $menu;
		
		// 메뉴 아이템들이 담을 변수.
		var $menuItems;
		// 오버된 메뉴 아이템을 담을 변수.
		var $overMenuItem;
		
		// 선택된 메뉴 아이템을 담을 변수.
		var $selectMenuItem;
		
		// 선택된 메뉴아이템이 있는지 체크유무값을 담을 변수.
		var bSelectActive;
		
		
		$(document).ready(function(){
			loadMenuXML();
		 });
		 
		 
		 // XMLHttpRequest를 미리 생성해 놓습니다.
		function loadMenuXML(){
			// 3. GET방식으로 데이터 보내기, 응답은 비동기로 클라이언트<->서버간의 연결 요청준비.
			$.get("menu.xml",null, this.on_CompleteLoad,"xml");
		
		}
	
		function on_CompleteLoad(xmlInfo){
			//6. 데이터 파싱처리 - 동적으로 메뉴아이템 생성하기.
			createMenuItems(xmlInfo);
			
			// 메뉴 정도 초기화.
			initMenuData();				
			// 메뉴 이벤트 리스너 초기화.
			initEventListener();
		}
		
		
		//6. 데이터 파싱처리 - 동적으로 메뉴아이템 생성하기.
		function createMenuItems(xmlInfo){
			//1. 데이터를 접근 하기 쉽도록 XML정보를 jQuery로 변경합니다.
			var $menuItems = $(xmlInfo).find("menuitem");
			
			var strDOM = "";
			for(var i=0;i<$menuItems.length;i++)
			{
				//2. N번째 메뉴  아이템 정보를 구합니다.
				var $menuItem = $menuItems.eq(i);
				
				//3. N번째 메뉴 아이템  패널을 생성합니다.			
				strDOM +='<li>'
				strDOM +='    <div><img src="'+$menuItem.find("img").text()+'"></div>';
				strDOM +='</li>';
			}
			
			//4. 이미지 컨테이너에 3번째에서 생성한 이미지 패널들을 추가합니다.
			var $menuContainer = $("ul.menu");
			$menuContainer.append(strDOM);
		}
				
		// 메뉴와 관련된 데이터를 초기화 합니다.
		function initMenuData(){
		 	// 재사용할 메뉴를 변수에 담아놓기.
			$menu = $("ul.menu");
			
			// 재사용할 메뉴아이템 목록을 변수에 담아놓기.
		 	$menuItems = $("ul.menu li");
			
			// 계속해서 사용할 항목들을 재사용하기 쉽도록 data에 넣어둡니다.
			 $menuItems.each(function(index,data){
			 	$(this).data("index", index);
				$(this).data("menuItem",$(this).find("div"));	
			 });
			 
			 bSelectActive = false;			 
		}
		 
		 // 메뉴와 관련된 이벤트 리스너들을 등록합니다.
		 function initEventListener(){
		 	// 마우스가 메뉴 영역을 나가는 경우, 오버되어 있는 메뉴아이템의  over스타일을 제거한다.
		 	$menu.bind("mouseleave",function(e){		
				if($overMenuItem){
					// over스타일을 제거.
					removeOverMenuItemStyle($overMenuItem)
					$overMenuItem 	= null;
					// 선택된 메뉴 아이템을  선택 스타일로 만들어줍니다.
					setSelectMenuItemStyle($selectMenuItem);
					
					bSelectActive = false;
				}
			});
	
		 	// 메뉴아이템에 마우스 이벤트 추가하기.
			$menuItems.mouseenter(function(e){
				// 초기 메뉴아이템에서 over되는 경우, 기존 선택된 메뉴아이템이 있는경우 선택스타일을 제거한다.
				if(bSelectActive==false){
					removeSelectMenuItemStyle($selectMenuItem);
					bSelectActive=true;
				}
				setOverMenuItem($(this));
			});
			
			
			// 메뉴아이템이 click되는 경우 선택 메뉴로 등록시키기.
			$menuItems.bind("click",function(e){
				selectMenuItem($(this));
			});
		 }
		 
		// over효과 실행.
		 function setOverMenuItem($newMenuItem){
		 	// 만약, 현재 over된 메뉴가 새롭게 over된 메뉴라면 나머지 내용을 실행이 되지 않도록 함.
			// 주의 : jQuery 확장요소들은 실행시에 새롭게 생성되기 때문에, $newMenuItem == $overMenuItem를 비교하면 안됨)
			 if($overMenuItem!=null && $newMenuItem.data("index")==$overMenuItem.data("index"))
				return;
	
			// 기존에 over된 메뉴아이템이 있다면 원래 메뉴 스타일(out상태)로 만든다.
			 if($overMenuItem)
				removeOverMenuItemStyle($overMenuItem);
			
			// 새롭게  over된 메뉴아이템을 over스타일로 만든다.
			setOverMenuItemStyle($newMenuItem);
			// 추후 over스타일을 없애주기 위해서  저장해 둬야합니다.
			$overMenuItem = $newMenuItem;
		 }
		 
		 // 메뉴를 over 상태로 만든다.
		 function setOverMenuItemStyle($menuItem)
		 {
		 	// 신규 메뉴를 over상태로 만든다.
			$menuItem = $menuItem.data("menuItem");
			
			$menuItem.stop();
			$menuItem.animate({
				top:-30
			}, 
			OVER_ANIMATION_TIME,"easeOutQuint");
		 }
		 
		 // 메뉴에 적용되어 있는 over상태를 제거한다.(out상태가 됨)
		 function removeOverMenuItemStyle($menuItem){
		 	// 신규 메뉴를 over상태로 만든다.
			$menuItem = $menuItem.data("menuItem");
			
			$menuItem.stop();
			$menuItem.animate({
				top:0
			}, 
			OUT_ANIMATION_TIME,"easeOutQuint");
		 }
		 
		 // 메뉴 선택처리.
		 function selectMenuItem($menuItem){
			 $selectMenuItem = $menuItem;
		 }
		 
		  // 선택메뉴 스타일 적용하기.
		 function setSelectMenuItemStyle($menuItem){
			 if($menuItem)
				 setOverMenuItemStyle($menuItem);
		 }
		
		// 선텍메뉴 스타일 제거하기.
		 function removeSelectMenuItemStyle($menuItem){
		 	 if($menuItem)
				 removeOverMenuItemStyle($menuItem);
		 }
	</script>
</head>

<body>
	<ul class="menu">
    </ul>
</body>
</html>
